<!DOCTYPE html>
<html>
<head>
<title>MarkDown Editor</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<meta name="description" content="MarkDown Editor">
</head>
<body>

	<div id="epiceditor"></div>
	
	<hr />
	<div id="log"></div>

	<hr />
    <div id="apiSave" style="cursor: pointer; background: green">CLICK TO SAVE DOCUMENT ON SERVER</div>
	MarkDownEditor by tglinski, js editor: <a href="http://epiceditor.com/">EpicEditor</a>
	<a href="/MarkDownEditorMagicFolder/stop" style="float: right; color:red">stop server</a>
	
	<script src="/MarkDownEditorMagicFolder/js/epiceditor.js"></script>
	<script src="/MarkDownEditorMagicFolder/js/jquery-1.11.0.min.js"></script>
	<script type="text/javascript">
		var opts = {
			container : 'epiceditor',
			textarea : null,
			basePath : '',
			clientSideStorage : true,
			localStorageName : 'epiceditor',
			useNativeFullscreen : true,
			parser : marked,
			file : {
				name : 'epiceditor',
				defaultContent : '',
				autoSave : 100
			},
			theme : {
				base : '/MarkDownEditorMagicFolder/themes/base/epiceditor.css',
				preview : '/MarkDownEditorMagicFolder/themes/preview/github.css',
				editor : '/MarkDownEditorMagicFolder/themes/editor/epic-dark.css'
			},
			button : {
				preview : true,
				fullscreen : true,
				bar : "auto"
			},
			focusOnLoad : true,
			shortcut : {
				modifier : 18,
				fullscreen : 70,
				preview : 80
			},
			string : {
				togglePreview : 'Toggle Preview Mode',
				toggleEdit : 'Toggle Edit Mode',
				toggleFullscreen : 'Enter Fullscreen'
			},
			autogrow : true
		}
		var editor = new EpicEditor(opts).load();

		$(document).ready(function() {
			
			//init 
			editor.importFile("epiceditor", "LOADING FILE CONTENT...");
			
			//load file content to edit
			$.get("?showSource")
				.done(function(data) {
					log("File loaded correctly");
					editor.importFile("epiceditor", data);
				}).fail(function() {
					log("File not found - loading demo content...");
					$.get("/MarkDownEditorMagicFolder/demo.md")
						.done(function(data2) {
							log("Editor prefilled with demo content. New file will be created when you click Save");
							editor.importFile("epiceditor", data2);
						}).fail(function() {
							log("Error loading demo content! New file will be created when you click Save");
						});
				});

			// save file content
			$("#apiSave").click(function() {
				$.ajax({
					url : '/MarkDownEditorMagicFolder/save',
					type : 'post',
					data : editor.exportFile(),
					headers : {
						filePath : $(location).attr('pathname')
					}
				}).done(function(data) {
					log("File saved correctly");
				}).fail(function(data) {
					log("Error saving file: " + data.responseText);
					alert("Error saving file: " + data.responseText);
				});
			});
		});
		
		
		function log(text){
			$("#log").prepend(new Date($.now()) + " - " + text + "<br/>");
		}
	</script>
</body>
</html>
